<template>
  <div class="button-configuration">
    <je-grid
      ref="grid"
      border
      auto-resize
      show-overflow="ellipsis"
      keep-source
      show-header-overflow
      resizable
      height="300"
      class="button-configuration-grid"
      size="mini"
      header-align="center"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showStatus: true,
        showInsertStatus: false,
      }"
      :store="gridStore"
    >
      <je-column width="40" align="center">
        <template #header>
          <i style="font-size: 16px; cursor: pointer" class="fal fa-plus" @click="addColumn"></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer"
            class="fal fa-times"
            @click="deleteColumn(row)"
          ></i>
        </template>
      </je-column>
      <je-column
        field="buttonName"
        :title="$t('buttonConfiguration.name')"
        width="120"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-select
            v-model:value="row.buttonName"
            :config-info="getConfigInfo()"
            :get-popup-container="getPopupContainer"
          />
        </template>
      </je-column>
      <je-column
        field="customizeName"
        :title="$t('buttonConfiguration.customName')"
        width="100"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-input v-model:value.trim="row.customizeName" />
        </template>
      </je-column>
      <je-column
        field="customizeComments"
        :title="$t('buttonConfiguration.approvalComments')"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-input v-model:value.trim="row.customizeComments" />
        </template>
      </je-column>
      <je-column
        field="pcListeners"
        :title="$t('buttonConfiguration.pcListeners')"
        width="60"
        align="center"
      >
        <template #default="{ row }">
          <i
            :style="`cursor: pointer;color:${
              row.pcListeners != undefined && row.pcListeners != ''
                ? '#FAC502'
                : 'rgb(141, 152, 171)'
            }`"
            class="fas fa-bolt"
            @click="handlerJs(row)"
          ></i>
        </template>
      </je-column>
    </je-grid>

    <BtnEditor
      v-if="modalType"
      :pc-listeners="selectRow.pcListeners"
      :func-info="funcInfo"
      @changeData="changeData"
    />
  </div>
</template>

<script>
  import { defineComponent, ref, watch, onMounted, nextTick } from 'vue';
  import { Grid, Select, Input, Data } from '@jecloud/ui';
  import { inputRender } from '@/helper/edit-render';
  import { isNotEmpty } from '@jecloud/utils';
  import BtnEditor from '@/components/event-modal/btn-editor.vue';

  export default defineComponent({
    name: 'ButtonConfiguration',
    components: {
      JeGrid: Grid,
      JeColumn: Grid.Column,
      JeSelect: Select,
      JeInput: Input,
      BtnEditor,
    },
    props: {
      processButtonConfig: {
        type: Array,
        default: () => {
          return [];
        },
      },
      funcInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      nodeId: {
        type: String,
        default: '',
      },
      typeData: {
        type: String,
        default: '',
      },
    },
    emits: ['setButtonConfig'],
    setup(props, { emit }) {
      const grid = ref(null);

      const gridStore = Data.Store.useGridStore({
        data: props.processButtonConfig,
      });

      const modalType = ref(false);
      const pcListeners = ref('');
      const selectRow = ref({});

      onMounted(() => {
        nextTick(() => {
          gridStore.loadData(props.processButtonConfig);
        });
      });

      watch(
        () => [props.nodeId, props.processButtonConfig],
        () => {
          gridStore.loadData(props.processButtonConfig);
        },
      );

      //添加列
      const addColumn = () => {
        const data = {
          buttonId: '',
          buttonCode: '',
          buttonName: '',
          customizeName: '',
          customizeComments: '',
          operationId: '',
          backendListeners: '',
          appListeners: '',
          pcListeners: '',
          displayWhenNotStarted: false,
          displayExpression: '',
        };
        gridStore.insert(data, -1);
      };

      //删除列
      const deleteColumn = (row) => {
        gridStore.remove(row);
      };

      //点击事件icon
      const handlerJs = (data) => {
        selectRow.value = data;
        modalType.value = true;
      };

      //弹窗关闭回调
      const changeData = (type, data) => {
        if (type == 'save') {
          selectRow.value.pcListeners = data;
        } else {
          modalType.value = false;
        }
      };

      watch(
        () => gridStore.data,
        (newData) => {
          //空数据过滤
          const datas = [];
          newData.forEach((item) => {
            if (isNotEmpty(item.buttonName)) {
              datas.push(item);
            }
          });
          emit('setButtonConfig', datas);
        },
        { deep: true },
      );

      const getConfigInfo = () => {
        let config = 'JE_WF_TASKBTNS,buttonId~buttonCode~buttonName,id~code~text,S';
        if (props.typeData == 'base') {
          config = 'JE_WF_PROCESSBTNS,buttonId~buttonCode~buttonName,id~code~text,S';
        }
        return config;
      };

      const getPopupContainer = () => document.body;

      return {
        gridStore,
        addColumn,
        deleteColumn,
        inputRender,
        handlerJs,
        grid,
        modalType,
        pcListeners,
        changeData,
        selectRow,
        getConfigInfo,
        getPopupContainer,
      };
    },
  });
</script>

<style lang="less">
  .button-configuration {
    .button-configuration-grid {
      .vxe-table--render-default .vxe-table--border-line {
        border-left: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
      }
    }
  }
</style>
